<template>
  <div class="page">
    <!-- <div class="page__bd">

      <div class="weui-cells__title">设备选项</div>
   
      <div class="weui-cells weui-cells_after-title">
        <block v-for="item in deviceData" :key="item">
            <iotbutton v-if="item.type == 'button'" :device="item" />
            <iotslider v-else-if="item.type === 'slider'" :device="item" />
            <iotswitch  v-else-if="item.type === 'switch'" :device="item" />
            <iotpicker  v-else-if="item.type === 'picker'" :device="item" />
            <iotshow v-else-if="item.type === 'show'" :device="item" />
        </block>
      </div>
    </div>-->
    <!-- new UI -->
    <div class="page-container">
      <div class="card-info-wrapper">
        <block v-for="item in deviceData" :key="item">
            <iotbutton v-if="item.type == 'button'" :device="item" />
            <iotslider v-else-if="item.type === 'slider'" :device="item" />
            <iotswitch  v-else-if="item.type === 'switch'" :device="item" />
            <iotpicker  v-else-if="item.type === 'picker'" :device="item" />
            <iotshow v-else-if="item.type === 'show'" :device="item" />
        </block>
        <!-- <div class="head-wrapper">
          <div class="device-id">{{deviceId}}</div>
          <div
            :class="deviceData[5].value == 1 ? 'device-switch-on' : 'device-switch-off'"
            @click="switchSwitch"
          >O</div>
        </div>
        <div class="useless-wrapper">
          <div class="water-speed-wrapper">
            <div class="water-speed">当前流速</div>
            <div class="value-wrapper-v">
              <div class="iconfont icon-yibiaopan"></div>
              <div class="value-z">{{deviceData[4].value}}</div>
              <div class="value-l">L/s</div>
            </div>
          </div>
          <div class="iconfont icon-shuibeng"/>
        </div> -->
      </div>
      <!-- <div class="param-wrapper-outer">
        <div class="param-wrapper-inner">
          <div class="water stage-wrapper">
            <div class="corner-wrapper">
              <div class="iconfont icon-mao"></div>
              <div class="text-x">水位</div>
            </div>
            <div class="value-wrapper-s">
              <div class="value-x">{{deviceData[3].value}}</div>
              <div class="value-m">m</div>
            </div>
            <div class="water-mask" :style="{ height: (deviceData[3].value)*360 + 'rpx'}"></div>
          </div>
          <div class="water turbidity-wrapper">
            <div class="corner-wrapper">
              <div class="iconfont icon-loudou"></div>
              <div class="text-x">浊度</div>
            </div>
            <div class="value-wrapper">
              <div class="value-y">{{deviceData[1].value}}</div>
            </div>
          </div>
        </div>
        <div class="param-wrapper-inner">
          <div class="water temperature-wrapper">
            <div class="corner-wrapper">
              <div class="iconfont icon-shuiwen"></div>
              <div class="text-x">水温</div>
            </div>
            <div class="value-wrapper">
              <div class="value-y">{{deviceData[0].value}}</div>
              <div class="value-c">°C</div>
            </div>
          </div>
          <div class="water ph-wrapper">
            <div class="corner-wrapper">
              <div class="iconfont icon-shaoping"></div>
              <div class="text-x">PH</div>
            </div>
            <div class="ph-circle"></div>
            <div class="ph-value">{{deviceData[2].value}}</div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import iotbutton from "@/components/button";
import iotswitch from "@/components/switch";
import iotslider from "@/components/slider";
import iotpicker from "@/components/picker";
import iotshow from "@/components/show";
import {
  setcid,
  getcid,
  connect,
  subscribe,
  unsubscribe,
  publishMessage
} from "@/utils";
var client = null;
var cid = null;
var num = 0;
export default {
  components: {
    iotbutton,
    iotswitch,
    iotslider,
    iotpicker,
    iotshow
  },
  data() {
    return {
      Client: null,

      // 新增 记录设备ID的字段
      deviceId: null,

      deviceData: [],
      dat: [
        {
          type: "show",
          lable: "温度",
          key: "temp",
          value: 0
        },
        {
          type: "show",
          lable: "湿度",
          key: "hum",
          value: 0
        },
        {
          type: "show",
          lable: "红外",
          key: "ir",
          value: 0
        },
        {
          type: "button",
          lable: "LED",
          key: "LED",
          value: 1
        },
        {
          type: "switch",
          lable: "LED",
          key: "LED",
          value: 1
        },
        {
          type: "slider",
          lable: "R",
          key: "R",
          value: 0,
          min: 0,
          max: 255
        },
        {
          type: "slider",
          lable: "G",
          key: "G",
          value: 0,
          min: 0,
          max: 255
        },
        {
          type: "slider",
          lable: "B",
          key: "B",
          value: 0,
          min: 0,
          max: 255
        },
        {
          type: "slider",
          lable: "转速",
          key: "motor",
          value: 0,
          min: -10,
          max: 10
        },
        {
          type: "picker",
          lable: "选择",
          key: "select",
          value: 1,
          options: [
            {
              lable: "lable1",
              value: "value1"
            },
            {
              lable: "lable2",
              value: "value2"
            },
            {
              lable: "lable3",
              value: "value3"
            }
          ]
        }
      ],
      water: [
        {
          type: "show",
          lable: "水温 (℃)",
          key: "b20",
          value: 0 // 22
        },
        {
          type: "show",
          lable: "浊度 ()",
          key: "mix",
          value: 0 //<5,3
        },
        {
          type: "show",
          lable: "PH",
          key: "ph",
          value: 0 //0-14,6-9
        },
        {
          type: "show",
          lable: "水位 (m)",
          key: "high",
          value: 0 //0-1,0.5
        },
        {
          type: "show",
          lable: "流速",
          key: "flow",
          value: 5 //0-10,1
        },
        {
          type: "switch",
          lable: "开关",
          key: "SW1",
          value: 1
        }
        // {
        //   type: "slider",
        //   lable: "转速",
        //   key: "motor",
        //   value: 0,
        //   min: -10,
        //   max: 10
        // }
      ]
    };
  },
  onShow() {
    var that = this;
    var pages = getCurrentPages(); //获取加载的页面
    var currentPage = pages[pages.length - 1]; //获取当前页面的对象
    var option = currentPage.route; //当前页面url
    setcid(currentPage.options.cid);
    this.deviceId = currentPage.options.cid;
    if (currentPage.options.username == "water") {
      this.deviceData = this.water;
    } else {
      this.deviceData = this.dat;
    }
    connect(msg => {
      var dat = JSON.parse(msg.payloadString);
      for (let val in this.deviceData) {
        for (let key in dat) {
          if (this.deviceData[val].key == key) {
            this.deviceData[val].value = dat[key];
          }
        }
      }
    });
  },
  onUnload() {
    unsubscribe();
  },
  beforeMount() {},
  mounted() {},
  methods: {
    /**
     * 开关操作，具体业务逻辑请按实际后台更改
     */
    switchSwitch() {
      publishMessage(`{"SW1":${this.deviceData[5].value}}`);
      if (this.deviceData[5].value === 1) {
        this.deviceData[5].value = 0;
      } else {
        this.deviceData[5].value = 1;
      }
    }
  },
  onShareAppMessage: {}
};
</script>

<style>
.page {
  width: 100%;
  height: 100%;
}

.page-container {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: -webkit-linear-gradient(
    -45deg,
    rgba(72, 0, 121, 0.8),
    rgba(0, 28, 111, 1)
  );
}

.card-info-wrapper {
  width: 90%;
  /* -webkit-filter: blur(10px); */
  overflow: hidden;
  box-shadow: 0 10rpx 60rpx rgba(0, 0, 0, 0.2);
  margin: 40rpx 0;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 40rpx;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
}

.head-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  margin-top: 40rpx;
}

.device-id {
  flex-shrink: 0;
  height: 60rpx;
  margin-left: 40rpx;
  border-radius: 30rpx;
  line-height: 60rpx;
  font-size: 32rpx;
  padding: 0 30rpx;
  color: white;
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 10rpx 10rpx 20rpx rgba(100, 100, 100, 0.14);
}

.useless-wrapper {
  width: 100%;
  margin-top: auto;
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.icon-shower {
  font-size: 290rpx;
  opacity: 0.1;
  position: relative;
  left: 40rpx;
  top: 100rpx;
  color: white;
}

.water-speed-wrapper {
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 10rpx 10rpx 20rpx rgba(100, 100, 100, 0.14);
  border-radius: 40rpx;
  margin-left: 40rpx;
  margin-bottom: 40rpx;
  padding: 10rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 140rpx;
}

.water-speed {
  margin-top: 10rpx;
  color: white;
  opacity: 0.5;
  font-size: 24rpx;
}

.value-wrapper-v {
  margin-top: 20rpx;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.value-z {
  line-height: 50rpx;
  text-align: end;
  margin-left: 20rpx;
  font-size: 46rpx;
  color: white;
}

.value-l {
  line-height: 50rpx;
  margin-top: 6rpx;
  margin-left: 10rpx;
  color: white;
  font-size: 32rpx;
  opacity: 0.7;
}

.icon-yibiaopan {
  line-height: 50rpx;
  text-align: end;
  color: white;
  opacity: 0.5;
  font-size: 40rpx;
  margin-top: 6rpx;
}

.icon-shuibeng {
  margin-left: auto;
  margin-right: 40rpx;
  color: white;
  opacity: 0.1;
  font-size: 350rpx;
  line-height: 220rpx;
}

.device-switch-on {
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 40rpx;
  line-height: 80rpx;
  font-size: 40rpx;
  text-align: center;
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: 8rpx 8rpx 20rpx rgba(0, 0, 0, 0.14);
  color: #00ff00;
  text-shadow: 0 0 10rpx rgba(0, 255, 0, 1);
}

.device-switch-off {
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 40rpx;
  line-height: 80rpx;
  font-size: 40rpx;
  text-align: center;
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: 8rpx 8rpx 20rpx rgba(0, 0, 0, 0.14);
  color: #ff3300;
  text-shadow: 0 0 10rpx rgba(255, 51, 0, 1);
}

.param-wrapper-outer {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 40rpx;
}

.param-wrapper-inner {
  width: 310rpx;
  margin: 0 25rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.water {
  border-radius: 40rpx;
  width: 310rpx;
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 5rpx 40rpx rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.stage-wrapper {
  height: 360rpx;
}

.water-mask {
  width: 310rpx;
  position: relative;
  z-index: 3;
  background-color: rgba(0, 104, 255, 0.37);
  bottom: 0;
}

.turbidity-wrapper {
  margin-top: 40rpx;
  height: 240rpx;
}

.temperature-wrapper {
  height: 300rpx;
}

.ph-wrapper {
  margin-top: 40rpx;
  height: 310rpx;
}

.corner-wrapper {
  margin-top: 20rpx;
  margin-left: 30rpx;
  display: flex;
  flex-shrink: 0;
  flex-direction: row;
  align-items: center;
}

.icon-mao,
.icon-loudou,
.icon-shaoping,
.icon-shuiwen {
  color: white;
  font-size: 32rpx;
  opacity: 0.6;
}

.text-x {
  margin-left: 16rpx;
  font-size: 24rpx;
  color: white;
  opacity: 0.6;
}

.value-wrapper {
  display: flex;
  flex-direction: row;
  margin: auto;
  align-items: flex-start;
}

.value-wrapper-s {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin: 90rpx auto auto auto;
  position: relative;
  z-index: 66;
}

.value-x {
  font-size: 62rpx;
  color: white;
}

.value-m {
  font-size: 40rpx;
  color: white;
  margin-left: 8rpx;
  margin-top: 24rpx;
}

.value-y {
  font-size: 62rpx;
  color: white;
}

.value-c {
  font-size: 40rpx;
  color: white;
  margin-left: 10rpx;
  margin-top: 10rpx;
}

.ph-circle {
  margin: auto;
  flex-shrink: 0;
  z-index: 66;
  width: 180rpx;
  height: 180rpx;
  background: -webkit-linear-gradient(#3131ff, #ff5959);
  mask: radial-gradient(transparent 84rpx, #000 84rpx);
  border-radius: 90rpx;
  overflow: hidden;
}

.ph-value {
  flex-shrink: 0;
  width: 180rpx;
  height: 180rpx;
  margin-left: auto;
  margin-right: auto;
  margin-top: -180rpx;
  font-size: 58rpx;
  color: white;
  line-height: 120rpx;
  text-align: center;
}
</style>
